<template>
	<view class="index-page page">
		<loading v-if="showLoading"></loading>
		<scroll-view :scroll-y="true" class="content">
			<CustomNav :normal="{ textColor: '#fff' }" title="消费多少送多少" :isBack="true"></CustomNav>
			<view class="swiper-block">
				<swiper :indicator-dots="false" :autoplay="true" :circular="true" :interval="5000"
					style="height: 480rpx;">
					<swiper-item v-for="(item, index) in swiperList" :key="item.id"
						@click="navigate('/page_other/mine/article?code='+item.code)">
						<image :src="cloudStorage+item.bannerUrl"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="info-block">
				<view class="screen">
					<view class="all">
						<picker class="text" :range="industry" range-key="name" :value="industryIndex"
							@change="bindIndustry">
							{{industry[industryIndex]['name']}}
						</picker>
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
						</image>
					</view>
					<view class="all">
						<view class="text" @click="screen(1)" :class="sort==1?'active':''">附近</view>
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
						</image>
					</view>
					<view class="all">
						<view class="text" @click="screen(2)" :class="sort==2?'active':''">智能排序</view>
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
						</image>
					</view>
				</view>
				<template v-if="list.length>0">
					<view class="active-block">
						<ShopList :list="list"></ShopList>
					</view>
				</template>
				<view v-if="more==false&&list.length==0" class="empty">暂无数据</view>
				<view v-else-if="more==false&&list.length>0" class="empty">没有更多了</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import CustomNav from '@/components/CustomNav/CustomNav';
	import ShopList from '@/components/ShopList/ShopList';
	import {
		getBannerList
	} from '@/api/home.js'
	import {
		getUserBusinessListApi
	} from '@/api/activities.js'
	import {
		getBusinessTypeList
	} from '@/api/home.js';
	import {
		isMore
	} from '@/util/util.js';
	import {
		getStorage,
		setStorage
	} from '@/util/auth';
	export default {
		components: {
			CustomNav,
			ShopList
		},
		data() {
			return {
				conf: {
					page: 1,
					limit: 10,
					businessName: '',
				},
				more: true,
				sort: 0,
				latitude: '',
				longitude: '',
				form: {
					isIndustry: '',
				},
				industryIndex: 0,
				industry: [],
				list: [],
				swiperList: [],
				classification: 0
			};
		},
		async onLoad(e) {
			if (e.classification) {
				this.classification = e.classification
			}
			
			uni.showCustomLoading();
			Promise.all([this.getLocation(),this.getList(true), this.getBusinessTypeList(), this.getBannerList()]).finally(() => {
				uni.hideCustomLoading()
			})
		},
		methods: {
			getLocation()
			{
				if (getStorage('latitude')) {
					this.latitude = getStorage('latitude');
					this.longitude = getStorage('longitude');
				} else {
					const position = getStorage('position');
					uni.getLocation({
						success: (current) => {
							this.latitude = current.latitude;
							this.longitude = current.longitude;
							console.log(2222)
						},
						fail: (e) => {
							this.showToast('获取位置失败，请重试！');
						}
					})
				}
				
			},
			search() {
				this.getList(true)
			},
			screen(e) {
				this.sort = e
				this.conf.page = 1
				this.getList(true)
			},
			handleRefresh() {
				this.conf.page = 1;
				this.more = true
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getList(true)
			},
			//获取商家类型
			getBusinessTypeList() {
				return getBusinessTypeList().then((res) => {
					let list = res || []
					var obj = {
						id: 0,
						name: '全部'
					}
					list.unshift(obj)
					this.industry = list
				})
			},
			//商家活动列表
			getList(refresh = false) {
				
				return getUserBusinessListApi({
					page: this.conf.page,
					limit: this.conf.limit,
					businessName: this.conf.businessName,
					latitude: this.latitude,
					longitude: this.longitude,
					type: this.form.isIndustry,
					classification: 5,
					sort: this.sort
				}).then((res) => {
					
					let list = res.list || [];
					if (refresh) {
						this.list = list;
					} else {
						this.list = [...this.list, ...list]
					}
					this.more = isMore(this.conf.page, this.conf.limit, res.count)
				})
			},
			bindIndustry(e) {
				this.industryIndex = e.detail.value;
				this.form.isIndustry = this.industry[this.industryIndex].id
				this.conf.page = 1
				this.getList(true)
			},
			onChange(e) {
				console.log(e)
			},
			getBannerList() {
				return getBannerList({
					classification: 5,
					type: 6
				}).then((res) => {
					this.swiperList = res.list
				})
			},
		},
		onPullDownRefresh() {
			this.handleRefresh();
		},
		onReachBottom() {
			if (this.more) {
				this.conf.page++;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getList();
			}
		},
	};
</script>

<style scoped lang="scss">
	.index-page {
		overflow: hidden;

		.top-banner {
			width: 100%;
		}

		.content {
			width: 100%;
			//height: calc(100vh - 160rpx);
			overflow-y: auto;
			position: relative;

			.swiper-block {
				width: 100%;
				height: 480rpx;
				border-radius: 20rpx;


				image {
					width: 100%;
					height: 100%;
					// border-radius: 20rpx;

				}
			}

			.top-block {
				width: 100%;
				height: 160rpx;
				margin-top: -110rpx;
				padding: 30rpx;
			}

			.search-block {
				width: 100%;
				height: 70rpx;
				display: flex;
				position: relative;
				margin-bottom: 30rpx;

				.address-block {
					display: flex;
					background-color: #FFFFFF;
					align-items: center;
					justify-content: center;
					width: 130rpx;
					border-radius: 50px;
					margin-right: 20rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 5rpx;
					}

					.address {
						color: #FF2F34;
						font-size: 28rpx;
					}
				}

				.input-block {
					display: flex;
					background-color: #FFFFFF;
					border-radius: 50px;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					padding: 6rpx 6rpx 6rpx 20rpx;

					.input-left {
						width: calc(100% - 140rpx);
						display: flex;

						image {
							width: 30rpx;
							height: 30rpx;
							// margin-right: 5rpx;
							margin: 7rpx 7rpx 0 0;
						}

						input {
							border-radius: 50px;
							width: 100%;

						}
					}

					.search {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 130rpx;
						border-radius: 50rpx;
						height: 100%;
						padding-bottom: 5rpx;
						color: #FFFFFF;
						background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
					}
				}
			}

			.info-block {
				position: relative;
				background-color: #f7f6f9;
				margin-top: -30rpx;
				border-radius: 50rpx 50rpx 0 0;
				padding: 30rpx;

				.screen {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;

					.all {
						display: flex;
						align-items: center;

						.text {
							font-size: 28rpx;
							color: #3D3D3D;
							margin-right: 10rpx;
						}

						.text.active {
							color: #FF2F34;
						}

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.active-block {
					display: flex;
					flex-direction: column;

					.active-list {
						display: flex;
						align-items: center;
						background-color: #FFFFFF;
						padding: 30rpx;
						margin-bottom: 30rpx;
						border-radius: 20rpx;

						.image {
							width: 200rpx;
							height: 200rpx;
							border-radius: 14rpx;
							margin-right: 10rpx;
						}

						.active-item {
							width: calc(100% - 210rpx);

							.name {
								font-size: 32rpx;
								margin-top: 8rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								margin-bottom: 20rpx;
							}

							.price-item {
								display: flex;
								align-items: center;
								margin-bottom: 20rpx;

								.price {
									color: #FF0014;
									font-weight: bold;
									font-size: 28rpx;
								}

								.preferential {
									color: #ccc9c9;
									font-size: 25rpx;
									margin-left: 6rpx;
									text-decoration: line-through;
								}
							}

							.address-item {
								display: flex;
								align-items: center;
								width: 100%;

								.img {
									width: 28rpx;
									height: 28rpx;
									margin-right: 6rpx;
								}

								.address {
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									font-size: 28rpx;
									color: #767676;
								}
							}
						}
					}
				}
			}

			.empty {
				text-align: center;
			}
		}
	}
</style>